<template>
  <div class="home-container">
    <NavMenu :currentCategory="currentCategory" @changeCategory="changeCategory"></NavMenu>
    <div class="content">
      <div class="filter">
        <a-input
          placeholder="请输入文件名称"
          v-model:value.trim="keyword"
          allowClear
          @keyup.enter="queryWithName"
        />
        <a-button type="primary" @click="queryWithName" :icon="h(SearchOutlined)">查询</a-button>
        <a-button type="primary" @click="resetQuery" :icon="h(RedoOutlined)">重置</a-button>
        <a-button type="primary" @click="uploadImg" :icon="h(CloudUploadOutlined)">上传</a-button>
      </div>
      <ImageContent
        ref="imageContentRef"
        @callback="doQuery"
        :style="`max-height: ${currentCategory !== 'all' ? '100%' : 'calc(100% - 42px)'}`"
      ></ImageContent>
    </div>

    <ImageUpload ref="imgUploadRef" @callback="doQuery"></ImageUpload>
  </div>
</template>

<script lang="ts" setup>
import { h, ref } from 'vue'
import NavMenu from '@/components/NavMenu.component.vue'
import ImageUpload from '@/components/ImageUpload.component.vue'
import ImageContent from '@/components/ImageContent.component.vue'
import { SearchOutlined, CloudUploadOutlined, RedoOutlined } from '@ant-design/icons-vue'

// 分类相关
const currentCategory = ref('all')
let imageContentRef = ref()
const changeCategory = (category: string) => {
  if (currentCategory.value === category) return
  currentCategory.value = category
  doQuery()
}

// 过滤相关
const keyword = ref('')
const queryWithName = () => {
  imageContentRef.value?.queryImages(keyword.value)
}

// 查询
const doQuery = () => {
  imageContentRef.value?.queryImages(null, currentCategory.value)
}

const resetQuery = () => {
  keyword.value = ''
  doQuery()
}

// 上传相关
let imgUploadRef = ref()
const uploadImg = () => {
  imgUploadRef.value?.handleOpen()
}
</script>
<style lang="less">
.home-container {
  height: 100%;
  padding: 15px 20px;
  display: flex;
  .content {
    width: calc(100% - 210px);
    .filter {
      margin: 0 10px 10px;
      .ant-input-affix-wrapper {
        width: 320px;
      }
      .ant-btn {
        margin-left: 8px;
      }
    }
  }
}
</style>
